<div ng-controller="detailCtrl">
    <div style="background: #ffffff" class="wrap">
        <div style="margin: 0.2rem 0 0.2rem 0.2rem;overflow: hidden;height: 30px;line-height: 30px;">
            <div class="col-xs-8">
                <div class="multipTitil">{{detailData.title}}</div>
            </div>
            <div class="col-xs-4">
                <p class="detailHeaTi-con">
                    <span>{{detailData.source}}</span>
                    <span class="detailHeaTi-con-Two">{{detailData.publishtime}}</span>
                    <span class="detailHeaTi-greTwo" ng-click="commentJump()"><img src="static/11.png"></span>
                    <span>{{detailData.countDiscuss}}</span>
                </p>
            </div>
        </div>
        <div class="row multipBox swiper-container swiper-news">
            <div class="swiper-wrapper">
                <!--重复部分-->
                <div ng-repeat="item in multipImageArr track by $index" class="swiper-slide">
                    <div class="col-xs-12 col-sm-8">
                        <div>
                            <div class="multipCarou"><img src="{{item.imageUrl}}"></div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-4 multiBoxDescr">
                        <div>
                            <div>
                                <p class="multoCount"><span class="mutltipCarouNumOne">{{$index+1}}</span><span class="mutltipCarouNumTwo">/{{multipImageArr.length}}</span></p>
                                <p class="multoCotents">{{item.summary}}</p>
                            </div>
                            <div>
                                <ul class="detailFiconList">
                                    <li><img  ng-click="detailAddPrase()" src={{detailAddPraseImagSmall}}>
                                        <span>{{currenLiveData.countPraise}}赞</span>
                                    </li>
                                    <li style="position: relative"><img ng-click="detailAddStor()" src="{{detailAddStorImagSmall}}">
                                        <span>收藏</span>
                                        <div class="detailFiconListLine detailFiconListLineLf"></div>
                                        <div class="detailFiconListLine detailFiconListLineRt"></div>
                                    </li>
                                    <li style="position: relative" href="{{detailData.shareUrl}}"><a><img src="static/10.png"></a>
                                        <span>分享</span>
                                        <div class="bdsharebuttonbox" style="position: absolute;top:0;width: 100%;height: 100%">
                                            <a class="bds_more" data-cmd="more" style="display: inline-block;width: 80px;height: 20px;opacity: 0"></a>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--含有首页推荐-->
    <div ng-if="childGetMouds.length!=0" class="wrap">
       <div style="width: 100%;height: 20px;background: #f6f6f6"></div>
        <!--组图详情推荐-->
        <div ng-if="detailDataRelated.length>0" class="multipSuggeBox" style="background: #ffffff">
            <div class="multipContDetailTitle">相关推荐</div>
            <div class="mupSuggBoxs">
                <div  ng-repeat="item in detailDataRelated|limitTo:4" class="col-xs-6 col-sm-3" style="margin: 0.2rem 0">
                    <div class="multipSuggeImge">
                        <img src="{{item.picM||item.picS||item.picB}}">
                    </div>
                    <p ng-click="jump('/detail/'+item.fileId)" class="multipSuggeText">{{item.title}}</p>
                </div>
            </div>
        </div>
        <!--评论-->
        <!--含有首页推荐-->
        <div class="" style="margin:0.2rem 0">
            <div class="conWidth mianConLeft contentsBg" ng-include="'tpl/components/comment.html'"></div>
            <div style="padding-bottom: 0.2rem" class="conAside conGroomConti" ng-include="'tpl/components/groom.html'"></div>
        </div>
    </div>
    <!--没有首页推荐-->
    <div class="wrap" ng-if="childGetMouds.length==0">
        <div style="width: 100%;height: 20px;background: #f6f6f6"></div>
        <!--组图详情推荐-->
        <div ng-if="detailDataRelated.length>0" class="multipSuggeBox" style="background: #ffffff">
            <div class="multipContDetailTitle">相关推荐</div>
            <div class="mupSuggBoxs">
                <div  ng-click="jump('/detailPicture/'+item.fileId)" ng-repeat="item in detailDataRelated|limitTo:4" class="col-xs-6 col-sm-3" style="margin: 0.2rem 0">
                    <div class="multipSuggeImge">
                        <img src="{{item.picM||item.picS||item.picB}}">
                    </div>
                    <p ng-click="jump('/detailPicture/'+item.fileId)" class="multipSuggeText">{{item.title}}</p>
                </div>
            </div>
        </div>
        <!--评论-->
        <div class="" style="margin:0.2rem 0">
            <div style="width:100%" class="conWidth contentsBg" ng-include="'tpl/components/comment.html'"></div>
        </div>
    </div>
</div>
<script type="text/javascript"  src="trd/swipe/swiper.min.js"></script>
<script type="text/javascript">
    //首页新闻头条
    var Swiper = new Swiper('.swiper-news', {
        loop:true,
        autoplay: 2000,
        observer: true,
        observeParents: true,
//      pagination : '.swiper-pagination_news',
        paginationClickable :true,
    });

    //        百度分享
    setTimeout(function(){
        window._bd_share_config = {
            common : {
                //此处放置通用设置
                bdText : shareTitle,
                bdDesc : shareTitle,
                bdUrl : shareUrl,
                bdPic : '分享图片'
            },
            share : [{
                //此处放置分享按钮设置
                "bdSize" : 16
            }],
//        slide : [{
//            //此处放置浮窗分享设置
//            bdImg : 0,
//            bdPos : "right",
//            bdTop : 100
//        }],
            image : [{

                viewType : 'list',
                viewPos : 'top',
                viewColor : 'black',
                viewSize : '16',
                viewList : ['qzone','tsina','huaban','tqq','renren','sqq']
            }]
        }
        with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];
        window._bd_share_main.init();
    },1000)
</script>
<style>
    .multipBox{
        /*margin: 20px 5px;*/
        margin: 0.2rem;
        margin-top: 0;
    }
    .multipTitil{
        font-size: 0.24rem;
        color: #000000;
    }
    .multipCarou{
        /*height: 485px;*/
        height: 3.85rem;
        border: 1px solid #eee;
    }
    .multipCarou img{
        width: 100%;
        height: 100%;
    }
    .detailHeaTi-con{
        color: #999999;
        font-size: 0.14rem;
        /*margin-bottom: 20px;*/
        /*position: relative;*/
        /*top: 14px;*/
    }
    .detailHeaTi-con>span{
        margin-right: 0.1rem;
    }
    .mutltipCarouNumOne{
        color: #fca205;
        font-size: 0.24rem;
        padding-right: 0.02rem;
    }
    .mutltipCarouNumTwo{
        color: #333333;
        font-size: 0.18rem;
    }
    .multoCount{
        /*margin: 20px 0;*/
        margin: 0.1rem 0;
    }
    .multoCotents{
        color: #333333;
        font-size: 0.16rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 11;
        -webkit-box-orient: vertical;
    }
    .detailHeaTi-con-Two{
        margin: 0 1%;
    }

    .detailHeaTi-greTwo{
        /*float: right;*/
        width: 20px;
        height: 20px;
        display: inline-block;
        position: relative;
        top: 3px;
    }
    .detailHeaTi-greTwo img{
        width: 100%;
        height: 100%;
    }
    .detailFiconList{
        position: absolute;
        bottom: 10px;
    }
    /*相关推荐*/
    .multipSuggeBox{
        padding:20px 5px;
    }
    .multipSuggeText{
        color: #333333;
        font-size: 0.16rem;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp:1;
        -webkit-box-orient: vertical;
        margin-top: 0.1rem;

    }


    .multipSuggeText{
        text-align: center;
    }
    .multipContDetailTitle{
        margin-left:20px;
        color: #000000;
        font-size: 0.24rem;
    }

    .multipSuggeBox:after{
        display: table;
        content: "";
        clear: both;
    }
    .multipSuggeImge{
        overflow: hidden;
        cursor: pointer;
    }
    .multipSuggeImge img{
        width: 100%;
        height: 100%;
    }
    @media only screen and (min-width: 302px){
        .mianConLeft{
            width: 100%;
            padding: 0 0.05rem;
        }
        .conGroomConti{
            width: 100%;
        }
        .detailContes{
            padding:0;
        }
        .multiBoxDescr{
            height: 1.6rem;
            position: relative;
        }
        .detailFiconList{
           /*padding: 0.15rem 0;*/
            width: 100%;
            height: 30px;
            line-height:30px;
        }
    }
    @media only screen and (min-width: 640px){
        .mianConLeft{
            width: 100%;
            padding: 0 0.05rem;
        }
        .conGroomConti{
            width: 100%;
        }
        .detailContes{
            padding:0;
        }
        .multipSuggeImge{
            height: 1.6rem;
        }
        .multipSuggeImge img{
            width: 100%;
            height: 100%;
        }
        .multiBoxDescr{
            height: 1.6rem;
            position: relative;
        }
        .detailFiconList{
            /*padding: 0.15rem 0;*/
        }
    }
    @media only screen and (min-width: 768px){
        .mianConLeft{
            width: 100%;
            padding: 0 0.05rem;
        }
        .conGroomConti{
            width: 100%;
        }
        .detailContes{
            padding:0;
        }
        .multipSuggeImge{
            height: 1.06rem;
        }
        .multipSuggeImge img{
            width: 100%;
            height: 100%;
        }
        .multiBoxDescr{
            /*height: 485px;*/
             height: 3.85rem;
            position: relative;
            padding: 0.1rem;
        }
    }
    @media only screen and (min-width: 1024px){
        .mianConLeft{
            width: 65%;
            padding: 0 0.05rem;
        }
        .conGroomConti{
            width: 33%;
        }
        .detailContes{
            padding:0;
        }
        .multipSuggeImge{
            height: 1.06rem;
        }
        .multipSuggeImge img{
            width: 100%;
            height: 100%;
        }
        .multiBoxDescr{
            height: 3.85rem;
            position: relative;
            padding: 0.1rem;
        }
    }
    @media only screen and (min-width:1366px){
        .mianConLeft{
            width: 65%;
            padding: 0 0.05rem;
        }
        .conGroomConti{
            width: 33%;
        }
        .detailContes{
            padding:0;
        }
        .multipSuggeImge{
            height: 1.06rem;
            overflow: hidden;
        }
        .multipSuggeImge img{
            width: 100%;
            height: 100%;
        }
        .multiBoxDescr{
            height: 3.85rem;
            position: relative;
            padding: 0.1rem;
        }
    }

    .mupSuggBoxs:after{
        content: "";
        display: block;
        clear: both;
    }
    /*动画*/
    .multipSuggeImge img{
        -webkit-transition: all 0.5s  ease-in-out;
        -moz-transition: all 0.5s  ease-in-out;
        -ms-transition: all 0.5s  ease-in-out;
        -o-transition: all 0.5s  ease-in-out;
        transition: all 0.5s  ease-in-out;
    }
    .multipSuggeImge:hover img{
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
    }
    .multipSuggeText:hover{
        color: red;
        cursor: pointer;
    }

</style>
